require(['./config'], () => {
    require(['template', 'request', 'header', 'fly', 'footer', 'zoom', 'toTop'], (template, request, header) => {
        class Detail {
            constructor() {
                this.addToCart()
                this.init()
                this.toTop()
                header.fideIn()
            }
            init() {
                // 取id
                const id = window.location.search.slice(4)
                console.log(id)
                request.getDetail(id).then(resp => {

                    if (resp.code === 200) {
                        const { detail } = resp.data
                        const {
                            id,
                            title,
                            price,
                            originPrice,
                            photo,
                            saleNum,
                            descContentList
                        } = detail
                        this.detail = {
                            id,
                            title,
                            price,
                            originPrice,
                            photo,
                            saleNum,
                            descContentList
                        }
                        $('#detail-display').html(template('detail-content', {...detail }))
                        this.zoom()
                        this.changenum()
                        this.switchPage()
                        header.calcCartNum()

                    }
                })
            }
            zoom() {
                $('.zoom-image').elevateZoom({
                    gallery: 'gal1'
                })
            }
            changenum() {
                var shopnum = 1;
                // 加数量
                $('#detail-display').on('click', '.num-minus', function() {
                        shopnum++;
                        $('#input-detail').attr("value", $('#input-detail').val(shopnum));
                    })
                    //减数量
                $('#detail-display').on('click', '.num-plus', function() {
                    if (shopnum > 1) {
                        shopnum--
                    } else {
                        shopnum = 1
                    }
                    $('#input-detail').attr("value", $('#input-detail').val(shopnum));
                })
            }
            addToCart() {
                $('#detail-display').on('click', '.add-to-cart', e => {
                    this.fly(e)
                        // 把this.detail加入购物车存localStorage
                        // 先取，如果有值的话应该追加当前数据，再重新存一遍覆盖之前的
                    let cartList = localStorage.getItem('cart')
                    if (cartList) {
                        // 代表已经存过购物车了
                        cartList = JSON.parse(cartList)
                            // 判断已经存过的数据里是否有当前商品
                        const isExist = cartList.some(cart => {
                            return cart.id === this.detail.id
                        })
                        if (isExist) {
                            // 代表当前商品已经存在在购物车里
                            // 一般如果要修改数组里的元素，用map
                            cartList = cartList.map(cart => {
                                if (cart.id === this.detail.id) cart.num++
                                    return cart
                            })
                        } else {
                            // 购物车里没有当前数据，就push购物车里需要存的数据
                            cartList.push({
                                id: this.detail.id,
                                title: this.detail.title,
                                price: this.detail.price,
                                originPrice: this.detail.originPrice,
                                photo: this.detail.photo[0],
                                saleNum: this.detail.saleNum,
                                // 第一次存的时候默认加入一条商品
                                num: 1,
                                // 新加入的商品默认选中
                                check: true
                            })
                        }
                        localStorage.setItem('cart', JSON.stringify(cartList))
                    } else {
                        // 第一次存
                        localStorage.setItem('cart', JSON.stringify([{
                            id: this.detail.id,
                            title: this.detail.title,
                            price: this.detail.price,
                            originPrice: this.detail.originPrice,
                            photo: this.detail.photo[0],
                            saleNum: this.detail.saleNum,
                            // 第一次存的时候默认加入一条商品
                            num: 1,
                            // 新加入的商品默认选中
                            check: true
                        }]))
                    }
                })
            }
            fly(e) {
                $(`<img src="${this.detail.photo[0].url}" style="width: 30px; height: 30px;">`).fly({
                    start: {
                        left: e.clientX, //开始位置（必填）#fly元素会被设置成position: fixed
                        top: e.clientY, //开始位置（必填）
                    },
                    end: {
                        left: 1450, //结束位置（必填）
                        top: 150, //结束位置（必填）
                    },
                    speed: 0.6, //越大越快，默认1.2
                    vertex_Rtop: 100, //运动轨迹最高点top值，默认20
                    onEnd: function() {
                            this.destroy()
                                // 购物车数量修改
                            header.calcCartNum()
                        } //结束回调

                });
            }
            switchPage() {
                $('#g-detail').on('click', function() {
                    $('#bt1').show()
                    $('#bt2').hide()
                    $('#bt3').hide()
                    $('.pord-detail').show()
                    $('.all-comment').hide()
                    $('.port-contact').hide()
                })
                $('#g-call').on('click', function() {
                    $('#bt2').show()
                    $('#bt1').hide()
                    $('#bt3').hide()
                    $('.pord-detail').hide()
                    $('.all-comment').show()
                    $('.port-contact').hide()
                })
                $('#g-connect').on('click', function() {
                    $('#bt3').show()
                    $('#bt1').hide()
                    $('#bt2').hide()
                    $('.pord-detail').hide()
                    $('.all-comment').hide()
                    $('.port-contact').show()
                })
            }
            toTop() {
                $('.totop').toTop();
            }
        }
        new Detail()
    })
})